<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
      .del {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input
        type="text"
        name=""
        id=""
        v-model="content"
        @keyup.enter="sendHandle()"
      />
      <button @click="sendHandle()">发布</button>

      <button @click="test">通过下标替换元素</button>

      <button @click="searchHandle()">搜索</button>
      <button @click="isSearch=false">x</button>
      <hr />
      已完成的任务数量：{{countDoneNum}}
      <hr />

      <div v-show="isEdit">
        编辑
        <input type="text" name="" id="" v-model="editObj.content" />
        <button @click="saveHandle()">保存</button>
      </div>
      <ul>
        <li v-for="item in arr" :key="item.id">
          <p :class="{del:item.isDone}">{{item.content}}</p>
          <button @click="delHandle(item.id)">删除</button>
          <button @click="changeStatus(item)">
            {{item.isDone?"已经完成-点击取消完成":"没有完成，点击完成"}}
          </button>
          <button @click="editHandle(item)">编辑</button>
        </li>
      </ul>

      <hr />

      <div v-show="isSearch">
        <h2>搜索结果</h2>
        <ul>
          <li v-for="item in searchResultArr" :key="item.id">
            <p :class="{del:item.isDone}">{{item.content}}</p>
            <button @click="delHandle(item.id)">删除</button>
            <button @click="changeStatus(item)">
              {{item.isDone?"已经完成-点击取消完成":"没有完成，点击完成"}}
            </button>
            <button @click="editHandle(item)">编辑</button>
          </li>
        </ul>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: function () {
          return {
            // 页面所有显示内容---状态 都需要在数据中定义好
            arr: [
              { id: 1, content: "今天的作业还没做完", isDone: false },
              { id: 2, content: "今天中吃饭", isDone: true },
            ],
            content: "",

            // 记录 编辑的div 的显示和隐藏状态
            isEdit: false,
            editObj: {},

            // 记录搜索结果的数组
            searchResultArr: [],
            isSearch: false,
          };
        },
        computed: {
          countDoneNum: function () {
            let num = 0;
            this.arr.forEach(function (v) {
              if (v.isDone) {
                num++;
              }
            });
            return num;
          },
        },
        methods: {
          // 发布
          sendHandle() {
            console.log("发布");
            //
            var obj = { id: Date.now(), content: this.content, isDone: false };
            this.arr.push(obj);

            // 清空
            this.content = "";
          },
          //删除
          delHandle(id) {
            this.arr = this.arr.filter((v) => v.id != id);
          },
          changeStatus(item) {
            console.log(item);
            // 修改数组中对象的 状态
            item.isDone = !item.isDone;
          },
          test() {
            // 直接通过下标修改，vue监听不到
            // this.arr[0] = { id: 3, content: "11", isDone: false };
            // 1-
            // this.$set(this.arr, 0, { id: 3, content: "11", isDone: false });
            // 2-
            this.arr.splice(0, 1, { id: 3, content: "11", isDone: false });
          },
          //编辑事件
          editHandle(item) {
            console.log(item);

            this.isEdit = !this.isEdit;

            //保存要编辑的对象--传递的地址---编辑的对象修改-影响列表对象的内容
            // 克隆 一个 新的item 对象出来--
            // this.editObj = item;

            // 深拷贝 和浅拷贝
            // this.editObj = item;
            // 浅拷贝
            // {id:1,child:{001}}   {id:1,child:001}

            // 深拷贝
            // {id:1,child:{001}}   {id:1,child:002}

            // 浅拷贝  item { id:1,child:{001}}
            //      id:1,child:{001}
            // 展开item 放入一个新对象中
            // this.editObj = { ...item };

            // 深拷贝
            this.editObj = JSON.parse(JSON.stringify(item));
          },

          saveHandle() {
            console.log(this.editObj);

            //修改 数组中跟他 id一样的对象的值

            /*  let index = this.arr.findIndex((v) => v.id == this.editObj.id);
            // this.arr[index] = this.editObj;
            this.$set(this.arr, index, this.editObj); 
            
            */

            let obj = this.arr.find((v) => v.id == this.editObj.id);
            // 只是改变 obj变量的地址--没有影响到数组本身
            // obj = this.editObj;

            // 修改的obj 的内存中数据
            // obj.content = this.editObj.content;

            // 浅拷贝--后一个对象的属性和方法都添加到 前一个对象
            Object.assign(obj, this.editObj);

            this.isEdit = false;
          },

          searchHandle() {
            this.isSearch = true;

            if (this.content == "") {
              this.searchResultArr = [];
            } else {
              console.log("首");
              this.searchResultArr = this.arr.filter((v) =>
                v.content.includes(this.content)
              );
            }
          },
        },
      });
    </script>
  </body>
</html>
